<template>
 <div class="rem-box">
     <div class="recommend-title">
         热门推荐
     </div>
     <ul class="item" v-for="item of recommendList" :key="item.id">
          <div >
             <img class="img-warrper" :src="item.imgUrl" :alt="item.title" />
             <div class="item-info">
                 <p class="item-title">{{item.title}}</p>
                 <p class="item-desc">{{item.desc}}</p>
                 <button class="item-button">查看详情</button>
             </div>
         </div>
     </ul>
     <!-- <ul  class="item border-bottom" >
    <router-link 
        tag="li" 
        v-for="item of recommendList" 
        :key="item.id">
        <img class="item-img" :src="item.imgUrl" :alt="item.title">
        <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
            <button class="item-button">查看详情</button>
        </div>
    </router-link> -->
 </div>
</template>

<script>
export default {
  name: "HomeRecommend",
  data () {
      return {
         recommendList: [{
          "id": "0001",
          "imgUrl": "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_140x140_80f63803.jpg",
          "title": "故宫",
          "desc": "东方宫殿建筑代表"
        }, {
          "id": "0002",
          "imgUrl": "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_140x140_abb362a7.jpg",
          "title": "南山滑雪场",
          "desc": "北京专业级滑雪圣地"
        }, {
          "id": "0003",
          "imgUrl": "http://img1.qunarzz.com/sight/p0/1501/f4/f467729126949c3a.water.jpg_140x140_ef235b1c.jpg",
          "title": "天安门广场",
          "desc": "我爱北京天安门，天安门上太阳升"
        }, {
          "id": "0004",
          "imgUrl": "http://img1.qunarzz.com/sight/p0/1501/40/40b2b6c951b28fdd.water.jpg_140x140_1c863e5c.jpg",
          "title": "水立方",
          "desc": "中国的荣耀，阳光下的晶莹水滴"
        }, {
          "id": "0005",
          "imgUrl": "http://img1.qunarzz.com/sight/p0/201308/23/b283071686e64dfec8d65eac.jpg_140x140_8c5a7c49.jpg",
          "title": "温都水城养生馆",
          "desc": "各种亚热带植物掩映其间"
        }]
      }
     
  }
};
</script>
<style >
.rem-box{
  overflow: hidden;
}
.recommend-title {
  margin-top: .5rem;
  line-height: 2.25rem;
  background: #eeeeee;
  text-indent:.5rem;
}

.item {
  overflow: hidden;
  display: flex;
  /* height:5.9375rem; */
  height: 5.9375rem;
  
}
  .img-warrper {
    width:5.3125rem;
    height:5.3125rem;
    float:left;
    padding:.3125rem;
  }
  .item-info {
    flex: 1;
    padding:.3125rem;
    width:12.5rem;
    float:left;
    overflow: hidden;
       }
    .item-title {
      line-height: 1.6875rem;
      font-size: 1rem;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }

    .item-desc {
      line-height: 1.25rem;
      color: #cccccc;
      font-size:.875rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .item-button {
      line-height:1.375rem;
      margin-top: .5rem;
      background: #ff9300;
      padding: 0 .3125rem;
      border-radius: .25rem;
      color: #ffffff;
      text-align: center;
      font-size:.875rem;
      /* margin: 0 auto; */
    }
</style>